﻿@using Moonglade.Core
@using Moonglade.DateTimeOps

@model PostSlugViewModelWrapper
@inject IDateTimeResolver DateTimeResolver

@{
    ViewBag.ShowBloggerIntroInXS = true;
    var ec = Settings.Value.Editor;
}

@section keywords {
    @if (Model.PostModel.Tags.Count > 0)
    {
        <meta name="keywords" content="@string.Join(", ", Model.PostModel.Tags.Select(t => t.NormalizedTagName))" />
    }
}

@section meta {
    @if (!Model.PostModel.IsExposedToSiteMap)
    {
        <meta name="robots" content="noindex, nofollow" />
    }

    <meta name="title" content="@Model.PostModel.Title" />
    <meta name="displaydate" content="@Model.PostModel.PubDateUtc.ToString("u")">
    <meta property="og:site_name" content="@BlogConfig.GeneralSettings.SiteTitle">
    <meta name="copyright" content="(C) @Model.PostModel.PubDateUtc.Year @BlogConfig.GeneralSettings.SiteTitle">
    <meta name="author" content="@BlogConfig.GeneralSettings.OwnerName" />
}

@section metadescription{
    @if (Model.PostModel.Tags.Count > 0)
    {
        <meta name="description" content="@Model.PostModel.Abstract" />
    }
}

@section scripts {
    <script src="~/js/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/js/highlight.pack.js"></script>

    @if (BlogConfig.ContentSettings.EnableImageLazyLoad)
    {
        <script>
            $(function () {
                $("img").lazyload({
                    effect: "fadeIn"
                });
            });
        </script>
    }

    @if (Settings.Value.AutoDarkLightTheme)
    {
        <script src="~/js/app/autodarklighttheme.js"></script>
    }
    <script>
        $(function () {
            var pid = $("article").data("postid");

            postSlug.registerRatingButtons(pid);
            postSlug.resizeImages();
            postSlug.renderCodeHighlighter();

            @if (null == ViewBag.IsDraftPreview)
            {
                <text>
                    $("#img-captcha").click(function () {
                        postSlug.resetCaptchaImage();
                    });

                    ajaxPostWithCSRFToken("/post/hit", { postId: pid }, function (data) {
                        console.info("updated post hit");
                    });

                    $('#post-qrcode').qrcode(document.URL);
                </text>
            }

            $('.lightswitch').click(function() {
                if (postSlug.isDarkMode) {
                    postSlug.useLightMode();
                } else {
                    postSlug.useDarkMode();
                }
            });
        });
    </script>
}

@if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
    <div class="alert alert-danger">
        @ViewBag.ErrorMessage
    </div>
}

@if (null != ViewBag.IsDraftPreview)
{
    <div class="alert alert-info">
        This is a preview for draft content.
    </div>
}

<article data-postid="@Model.PostModel.PostId">
    <header class="post-header">
        <h4 class="post-title">
            @Model.PostModel.Title
        </h4>
        <hr class="d-none d-md-block post-header-hr" />

        <div class="d-block d-sm-none">
            <div class="post-publish-info post-publish-info-mobile bg-light">
                <time datetime="@Model.PostModel.PubDateUtc.ToString("u")" title="GMT @Model.PostModel.PubDateUtc">@DateTimeResolver.GetDateTimeWithUserTZone(Model.PostModel.PubDateUtc).ToString("MM/dd/yyyy")</time>
                @if (Model.PostModel.LastModifyOnUtc.HasValue)
                {
                    <span>(Edit on @DateTimeResolver.GetDateTimeWithUserTZone(Model.PostModel.LastModifyOnUtc.Value).ToString("MM/dd/yyyy HH:mm"))</span>
                }
                | @BlogConfig.GeneralSettings.TimeZoneId
            </div>
        </div>

        <div class="d-none d-md-block post-publish-info mb-2">
            <strong class="text-muted">
                <time datetime="@Model.PostModel.PubDateUtc.ToString("u")" title="GMT @Model.PostModel.PubDateUtc">@DateTimeResolver.GetDateTimeWithUserTZone(Model.PostModel.PubDateUtc).ToString("MM/dd/yyyy")</time>
                @if (Model.PostModel.LastModifyOnUtc.HasValue)
                {
                    <span>(Edit on @DateTimeResolver.GetDateTimeWithUserTZone(Model.PostModel.LastModifyOnUtc.Value).ToString("MM/dd/yyyy HH:mm"))</span>
                }
                | @BlogConfig.GeneralSettings.TimeZoneId
            </strong>
            <span class="badge badge-secondary float-right post-hit-number">@Model.PostModel.Hits Reads</span>
        </div>

        <div class="hidden-print">
            <section class="post-cat-tag-info">
                <div class="float-right d-none d-md-block">
                    @if (Model.PostModel.Tags.Count > 0)
                    {
                        <span class="toptags-list toptags-list-sm">
                            @foreach (var item in Model.PostModel.Tags)
                            {
                                <a asp-controller="Tags"
                                   asp-action="List"
                                   asp-route-normalizedName="@item.NormalizedTagName">@item.TagName</a>
                            }
                        </span>
                    }
                </div>
                @if (Model.PostModel.Categories.Count > 0)
                {
                    <ul class="d-flex flex-row list-unstyled ul-cat-list-desktop mb-0">
                        @foreach (var item in Model.PostModel.Categories)
                        {
                            <li>
                                <a class="btn btn-sm btn-outline-success"
                                   asp-controller="Category"
                                   asp-action="List"
                                   asp-route-categoryName="@item.Name.ToLower()">
                                    <span class="icon-folder" aria-hidden="true"></span>
                                    @item.DisplayName
                                </a>
                            </li>
                        }
                    </ul>
                }
            </section>
        </div>

        <hr class="post-header-hr" />
    </header>
    <section class="post-content clearfix">
        @switch (ec)
        {
            case EditorChoice.Markdown:
                @Html.Raw(Utils.ConvertMarkdownContent(Model.PostModel.Content, Utils.MarkdownConvertType.Html, false))
                break;
            case EditorChoice.None:
            case EditorChoice.HTML:
            default:
                @Html.Raw(Model.PostModel.Content)
                break;
        }
    </section>
    @if (BlogConfig.ContentSettings.ShowPostFooter)
    {
        <section class="post-footer clearfix">
            @Html.Raw(BlogConfig.ContentSettings.PostFooterHtmlPitch)
        </section>
    }
    @if (null == ViewBag.IsDraftPreview)
    {
        <partial name="_PostSlugActions" />
    }

    <div class="tag-mobile d-block d-sm-none">
        <hr />
        @if (Model.PostModel.Tags.Count > 0)
        {
            <span class="toptags-list toptags-list-sm">
                @foreach (var item in Model.PostModel.Tags)
                {
                    <a asp-controller="Tags"
                       asp-action="List"
                       asp-route-normalizedName="@item.NormalizedTagName">@item.TagName</a>
                }
            </span>
        }
    </div>
</article>

@if (null == ViewBag.IsDraftPreview)
{
    <div class="hidden-print">
        @if (BlogConfig.ContentSettings.EnableComments)
        {
            if (Model.PostModel.CommentEnabled)
            {
                <div class="card bg-light comment-form-containter mb-4">
                    <div class="card-header">
                        Comments
                        <span class="badge badge-secondary float-right">@Model.PostModel.CommentCount</span>
                    </div>
                    <form id="form-comment" asp-controller="Comment" asp-action="NewComment"
                          data-ajax-begin="onCommentBegin"
                          data-ajax-complete="onCommentComplete"
                          data-ajax-failure="onCommentFailed"
                          data-ajax-success="onCommentSuccess"
                          data-ajax="true"
                          data-ajax-method="POST">
                        <div class="card-body">
                            <input type="hidden" asp-for="NewCommentViewModel.PostId" />
                            <div class="row form-group">
                                <div class="col-md-4">
                                    <input type="text" class="form-control" placeholder="Your Name" asp-for="NewCommentViewModel.Username" />
                                    <span asp-validation-for="NewCommentViewModel.Username" class="text-danger"></span>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" placeholder="Email" asp-for="NewCommentViewModel.Email" />
                                    <span asp-validation-for="NewCommentViewModel.Email" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="comment-md-content form-group">
                                <textarea asp-for="NewCommentViewModel.Content" class="form-control" cols="60" rows="4" placeholder="Your comments (Markdown supported)" maxlength="1024"></textarea>
                                <span asp-validation-for="NewCommentViewModel.Content" class="text-danger"></span>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <img id="img-captcha" src="@Url.Action("GetCaptchaImage", "Assets")" />
                                        </div>
                                        <input type="text"
                                               asp-for="NewCommentViewModel.CaptchaCode"
                                               class="form-control"
                                               placeholder="Captcha Code"
                                               autocomplete="off"
                                               minlength="4"
                                               maxlength="4" />
                                    </div>
                                    <span asp-validation-for="NewCommentViewModel.CaptchaCode" class="text-danger"></span>
                                </div>
                                <div class="col">
                                    <button id="btn-submit-comment" type="submit" class="btn btn-success float-right">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            }
            else
            {
                <div class="alert alert-warning">Comment of this post is disabled.</div>
            }
        }
        else
        {
            <div class="alert alert-warning">Comment is disabled by blog administrator.</div>
        }

        <div id="loadingIndicator" style="display: none;" class="mb-4">
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    <span class="sr-only">Processing...</span>
                </div>
            </div>
        </div>

        <div id="thx-for-comment" class="alert alert-warning" style="display: none;">
            Thanks, your comment is pending approval now. <br />
            It will show up once blog administrator approved your comment.
        </div>

        <div id="thx-for-comment-non-review" class="alert alert-success" style="display: none;">
            Thanks for your comment. <br />
            Refresh the page to see your comment.
        </div>

        @if (Model.PostModel.CommentCount > 0)
        {
            <section id="comments-list">
                @await Component.InvokeAsync("CommentList", new { postId = Model.PostModel.PostId })
            </section>
        }
    </div>
}

<div class="lightswitch border rounded">
    <span id="lighticon" class="icon-sun-o"></span>
</div>